<template>
    <div class="w-full flex justify-center my-5 cursor-pointer">
        <div class="flex 2xl:w-3/5 xl:w-4/5 w-full px-10 justify-between md:px-24">
            <div @click="prev" class="prev relative text-sm text-link">上一页</div>
            <div @click="next" class="next relative text-sm text-link">下一页</div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {  watch } from "vue";
import { state, params } from "@utils/store";
import { useRouter } from "vue-router";
const router = useRouter()
let idNum = 0
watch(params, () => {
    console.log('子组件观察到改变了' + params.id)
    try {
        idNum = parseInt(params.id.split('-')[1])
    } catch (error) {
    }
})

const prev = () => {
    if (idNum > 1) {
        const prevId = params.id.split('-')[0] + '-' + (idNum - 1).toString().padStart(3, '0')
        params.id = prevId
         router.push('/document/sleep/' + params.id)
    } else {
        alert('已经是第一页了')
    }
}
const next = () => {
    if (idNum < state.totalNum) {
        const nextId = params.id.split('-')[0] + '-' + (idNum + 1).toString().padStart(3, '0')
        params.id = nextId
    router.push('/document/sleep/' + params.id)
    } else {
        alert('已经是最后了')
    }

}
</script>

<style lang="scss" scoped>
.prev::before,
.next::before {
    content: "";
    position: absolute;
    top: 0;

    display: block;
    height: 20px;
    width: 20px;
    border-top: 2px solid #2d70c3;
}
.prev::before {
    left: -15px;
    border-left: 2px solid #2d70c3;
    transform: rotate(-45deg);
}
.next::before {
    right: -15px;
    border-right: 2px solid #2d70c3;
    transform: rotate(45deg);
}
</style>